* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#root {
  height: 100%;
}

.page-enter {
  opacity: 0;
  transform: scale(1.1);
}

.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: scale(1);
}

.page-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

.modal-enter {
  opacity: 0;
  transform: scale(0.9) translateY(100px);
}
.modal-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.modal-exit {
  opacity: 1;
}
.modal-exit-active {
  opacity: 0;
  transform: scale(0.9);
}

.modal-enter-active,
.modal-exit-active {
  transition: 500ms;
}
